<script lang="ts" setup>
import OrderAdminTable from './components/table.vue'
import type { MyOrderItem } from '@/api/order'
import { OrderStatus, myOrderGetList } from '@/api/order'

function orderStatusText(status) { // 订单状态文案转换
  switch (status) {
    case 'DFK': return '待付款'
    case 'DFH': return '待发货'
    case 'DSH': return '待收货'
    case 'DPJ': return '待评价'
    case 'YQX': return '已取消'
    case 'YWC': return '已完成'
  }
}
// 初始化
interface ListQuery {
  page: number
  size: number
  total: number
  orderStatus: OrderStatus
  data: MyOrderItem[]
}
const listQuery = ref<ListQuery>({
  page: 1,
  size: 10,
  total: 0,
  orderStatus: OrderStatus.DFH,
  data: [],
})
async function getList(orderStatus: OrderStatus) {
  listQuery.value.orderStatus = orderStatus
  const { code, data } = await myOrderGetList({
    page: listQuery.value.page,
    size: listQuery.value.size,
    orderStatus: listQuery.value.orderStatus,
  })
  if (code === 0) {
    listQuery.value.total = data.total
    listQuery.value.data = data.list
  }
}
onMounted(() => {
  getList(OrderStatus.DFH)
})
</script>

<template>
  <AppPage>
    <n-tabs v-model:value="listQuery.orderStatus" type="segment" size="large" animated class="orderAdminList" @update:value="getList">
      <n-tab-pane v-for="item in OrderStatus" :key="item" :name="item" :tab="orderStatusText(item)">
        <OrderAdminTable v-model:tableData="listQuery.data" :order-status="item" @get-list="getList" />
      </n-tab-pane>
    </n-tabs>
  </AppPage>
</template>

<style lang="scss" scoped>
.orderAdminList{
  :deep(.n-tabs-tab) {
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%);
  }
  :deep(.n-tabs-tab--active){
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%) !important;
    color: var(--primary-color) !important;
  }
}
</style>
